import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import './App.moudle.css'
import Header from './components/Header' //一般组件
import MyNavLink from './components/MyNavLink' //一般组件
import About from './pages/About' //路由组件
import Home from './pages/Home'
export default class App extends Component {

    render() {
        return (
            <div className="page">
                <div className="header">
                    <Header />
                </div>
                <div className="bottom">
                    <div className="navigate">
                        {/*在React中靠路由链接实现切换组件--编写路由链接*/}
                        {/* 可以使用 activeClassName 属性指定高亮样式*/}
                        <MyNavLink to="/home" >home</MyNavLink>
                        <MyNavLink to="/about">about</MyNavLink>
                    </div>
                    {/* 注册路由 */}
                    <div className="contents">
                        <Route path="/about" component={About}></Route>
                        <Route path="/home" component={Home}></Route>
                    </div>
                </div>
            </div>
        )
    }
}
